<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本表格模板</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->


<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style>
	.maingrid_content{
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		border: 1px solid #EEEEEE;
		z-index: 99999;
		margin-right: -100%;
    	box-shadow: -1px 0 3px #d3d8db;
    	display: none;
	}
	.oppContent{
		width: 340px;
		height: 40px;
		float: left;
	}
	.searchContent{
		width: 600px;
		height: 40px;
		position: absolute;
		right: 0;
	}
</style>
</head>
<body>

<div class="page_content">
	<div class="oppContent">
		<div class="buttonGroup" style="width: 320px;">
			<span class="leftButton icon_add" onclick="addUser()">新增</span>
			<span class="centerButton icon_delete" onclick="deleteUser()">删除</span>
			<span class="centerButton icon_import" onclick="importUser()">导入</span>
			<div class="popupMenu">
				<span class="rightButton icon_export">导出</span>
				<div class="clear"></div>
				<div class="popupMenu_con">
					<a href="javascript:;"  onclick="exportUser()"><span>导出当前页</span></a>
					<a href="javascript:;"  onclick="exportUser2()"><span>导出全部数据</span></a>
				</div>
			</div>	
		</div>
	</div>
	<div class="searchContent">
		<form action="<%=path%>/getUsersOfPager.action" id="queryForm" method="post">
			<input type="hidden" id="parentId" name="parentId" value="1"/>

			<table style="float: right;">
				<tr>
					<td>
						<input type="text" placeholder ="姓名" id="searchInput" name="userinfor.userName" />
						<input type="text" style="width:2px;display:none;"/>
					</td>
					<td><button type="button" id="search" class="primary" onclick="searchHandler()"><span class="icon_find">查询</span></button></td>
					<td><button type="button" onclick="resetSearch()"><span class="icon_clear">重置</span></button></td>
					<td>
						<button type="button" style="width:100px;" id="fullscreenBtn" onclick="maxGrid()"><span class="icon_fullscreen">最大化表格</span></button>
					</td>
				</tr>
			</table>						
		</form>
	</div>
	<div class="clear"></div>
		
		<div id="dataBasic"></div>
			
 </div> 
	
	
<script type="text/javascript">
	
	
	//定义grid
	var g ;
	//数据表格使用
      var gridData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":5},
      {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":5},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":5},
      {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":5},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
      ]}
	
	
	//初始化函数
	function initComplete(){
		//当提交表单刷新本页面时关闭弹窗
		top.Dialog.close();

		//初始化grid组件
		initGrid();
		
		//监听查询框的回车事件
		 $("#searchInput").keydown(function(event){
		 	if(event.keyCode==13){
				searchHandler();
			}
		 })

		 $("body").append('<div class="maingrid_content"><IFRAME style="box-sizing: border-box; background: white;" height="100%" width="100%" frameBorder=0 id=frmright name=frmright src="" allowTransparency="true"></IFRAME></div>');
		
	      $(".page_content").click(function(e) { //点击空白退回
	       if($(e.target).attr("class")!="l-grid-row-cell-inner-text"){
	         	$(".maingrid_content").stop().animate({marginRight:"-100%"},300,function(){
         		$(".maingrid_content").hide();
         	});
	         }
	      });
	}
	
	
	//初始化Grid处理
	function initGrid() {
		g = $("#dataBasic").quiGrid({
			columns:[
				{ display: '姓名', name: 'name',     align: 'left', width: "25%",cellClick:true},
	            { display: '性别', name: 'sex',      align: 'left', width: "25%"},
	            { display: '部门', name: 'deptName', align: 'left', width: "25%", isSort:false},
	            { display: '学历', name: 'degree',   align: 'left', width: "25%" },
           		{ display: '操作', isAllowHide: false, align: 'left', width:120,
					 render: function (rowdata, rowindex, value, column){
                 	    return '<div class="grid_opp_container">'
                                 + '<span class="grid_opp_edit" onclick="onEdit(' + rowdata.id + ')">修改</span>' 
                                 + '<span class="grid_opp_delete" onclick="onDelete(' + rowdata.id+','+rowindex + ')">删除</span>'
                             + '</div>';
	                 }
	            }
			  ],
		 data:gridData, sortName: 'id',rownumbers:true,checkbox:true,
         height: '100%', width:"100%",pageSize:10,percentWidthMode:true,
         onClickCell : function (rowdata, rowid, rowobj){
                    $(".maingrid_content").show();
                    $(".maingrid_content").find("iframe").attr("src","../../sample_skin/normal/user-management-content2.html");
                    $(".maingrid_content").stop().animate({marginRight:"0"},500);
                } 
		});
	}
	
	
	//新增
	function addUser() {
		var orgid = $("#parentId").val();
		var diag = new top.Dialog();
		diag.Title = "新增用户";
		diag.URL = "../../sample_skin/normal/user-management-content.html";
		diag.Width=600;
		diag.Height=400;
		diag.OkButtonText = "保存并新建用户";
		//顺序很重要，diag.show()之前添加确定按钮事件，show之后添加新按钮
		diag.OKEvent = function() {
			diag.innerFrame.contentWindow.submitHandler(0);
		};
		diag.show();
		diag.addButton("next", " 保 存 ", function() {
			diag.innerFrame.contentWindow.submitHandler(1);
		});

	}
	

	
	//批量删除
	function deleteUser() {
		top.Toast("showNoticeToast", "向后台发送ajax请求来批量删除。见JAVA版或.NET版演示。");
	}
	
	//导入
	function importUser() {
		top.Toast("showNoticeToast", "见JAVA版或.NET版演示。");
	}
	//导出
	function exportUser() {
		top.Toast("showNoticeToast", "见JAVA版或.NET版演示。");
	}
	
	//导出所有
	function exportUser2() {
		top.Toast("showNoticeToast", "见JAVA版或.NET版演示。");
	}
	
	//修改
	function onEdit(rowid){
		top.Toast("showNoticeToast", "见JAVA版或.NET版演示。");
	}
	
	//删除
	function onDelete(rowid,rowidx){
		top.Dialog.confirm("确定要删除该记录吗？",function(){
		  	top.Toast("showNoticeToast", "向后台发送ajax请求来删除。见JAVA版或.NET版演示。");
		});
	}
	
	//查询
	function searchHandler(){
			top.Toast("showNoticeToast", "见JAVA版或.NET版演示。");
	}

	//重置查询
	function resetSearch(){
		$("#queryForm")[0].reset();
	   $('#search').click();
	}

	function maxGrid(){
        var btn=$("#fullscreenBtn").find("span");
        if(btn.hasClass('icon_actualscreen')){
            top.switchMenu(1);
            top.fullScrennHander(false);
            btn.removeClass('icon_actualscreen');
            btn.text("最大化表格");
           
        }
        else{
          top.switchMenu(0);
          if (typeof window.screenX === "number"){
            top.fullScrennHander(true);
            }
          else{
            top.Toast('showNoticeToast', '您的浏览器不支持全屏，如果需要，请手动按F11键。');
          }
          btn.addClass('icon_actualscreen');
           btn.text("还原窗口");
        }


      }

</script>	
</body>
</html>